<template>
  <view class="container">
    <text class="title">桂花 Osmanthus fragrans</text>
    
    <view class="section">
      <text class="subtitle">摘要</text>
      <text class="content">
        桂花是中国传统十大花卉之一，集绿化、美化、香化于一体的观赏与实用兼备的优良园林树种。桂花清可绝尘，浓郁远溢，堪称一绝。尤其是仲秋时节，丛桂怒放，夜静轮圆之际，把酒赏桂，陈香扑鼻，令人神清气爽。
      </text>
    </view>

    <view class="section">
      <text class="subtitle">形态特征</text>
      
      <view class="feature-item">
        <text class="feature-title">树形：</text>
        <text class="feature-content">常绿乔木或灌木，树皮灰褐色，小枝黄褐色</text>
      </view>

      <view class="feature-item">
        <text class="feature-title">叶：</text>
        <text class="feature-content">椭圆形或椭圆披针形，先端渐尖，叶柄长0.8-1.2厘米</text>
      </view>

      <view class="feature-item">
        <text class="feature-title">花：</text>
        <text class="feature-content">聚伞花序簇生，花冠白/淡黄/橘红色，花极芳香</text>
      </view>

      <view class="feature-item">
        <text class="feature-title">果：</text>
        <text class="feature-content">歪斜椭圆形，长1-1.5厘米，紫黑色</text>
      </view>

      <view class="feature-item">
        <text class="feature-title">花期：</text>
        <text class="feature-content">9-10月上旬｜果期：翌年3月</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.container {
  padding: 24rpx;
  background-color: #f8f8f8;
  
  .title {
    display: block;
    font-size: 40rpx;
    color: #2c3e50;
    font-weight: 600;
    margin: 20rpx 0;
    text-align: center;
  }

  .section {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 32rpx;
    margin: 24rpx 0;
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.06);

    .subtitle {
      font-size: 34rpx;
      color: #27ae60;
      font-weight: 500;
      margin-bottom: 24rpx;
      display: block;
      border-left: 8rpx solid #27ae60;
      padding-left: 20rpx;
    }

    .content {
      font-size: 28rpx;
      color: #666;
      line-height: 1.8;
      text-align: justify;
    }

    .feature-item {
      display: flex;
      margin: 20rpx 0;
      
      .feature-title {
        width: 120rpx;
        font-size: 28rpx;
        color: #e67e22;
        font-weight: 500;
        flex-shrink: 0;
      }

      .feature-content {
        flex: 1;
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
      }
    }
  }
}
</style>